<template>
  <div class="develop-online">
    <Form
      :model="formState"
      name="basic"
      style="width: 1010px"
      :label-col="{ style: { width: '210px' } }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      label-align="right"
      :colon="false"
    >
      <div class="display-mode">
        <FormItem name="FUNCINFO_CHILDSHOWTYPE" class="FUNCINFO_CHILDSHOWTYPE">
          <template #label> &nbsp;{{ $t('develop.displayMode') }} </template>
          <Select
            v-model="formState.FUNCINFO_CHILDSHOWTYPE"
            :allow-clear="false"
            :default-value="formState.FUNCINFO_CHILDSHOWTYPE"
            :options="positionList"
            class="myInput"
            @change="($event) => handleChange('FUNCINFO_CHILDSHOWTYPE', $event)"
          >
          </Select>
        </FormItem>
      </div>
      <hr />
      <div class="list-parame">
        <FormItem
          name="FUNCINFO_COLUMN_WIDTH"
          class="FUNCINFO_COLUMN_WIDTH"
          :label="$t('develop.lineHeight')"
        >
          <Select
            v-model="formState.FUNCINFO_COLUMN_WIDTH"
            :allow-clear="false"
            :default-value="formState.FUNCINFO_COLUMN_WIDTH"
            :options="lineHeightList"
            class="myInput"
            @change="($event) => handleChange('FUNCINFO_COLUMN_WIDTH', $event)"
          >
          </Select>
        </FormItem>
        <FormItem
          name="FUNCINFO_PAGESIZE"
          class="FUNCINFO_PAGESIZE"
          :label="$t('develop.branches')"
        >
          <Select
            v-model="formState.FUNCINFO_PAGESIZE"
            :allow-clear="false"
            :default-value="formState.FUNCINFO_PAGESIZE"
            :options="showCount"
            class="myInput"
            @change="($event) => handleChange('FUNCINFO_PAGESIZE', $event)"
          >
          </Select>
        </FormItem>
        <FormItem
          name="FUNCINFO_PAGEINFOALIGN"
          class="FUNCINFO_PAGEINFOALIGN"
          :label="$t('develop.position')"
        >
          <radio-group
            v-model:value="formState.FUNCINFO_PAGEINFOALIGN"
            :options="listPositionOptions"
            class="my-checkbox"
          />
        </FormItem>
        <FormItem name="FUNCINFO_GRIDHIDES" class="FUNCINFO_GRIDHIDES">
          <template #label> &nbsp;{{ $t('develop.forbidden') }} </template>
          <CheckboxGroup
            v-model:value="formState.FUNCINFO_DISABLEQUERYSQL"
            :options="listElementOptions"
            class="my-checkbox"
          />
        </FormItem>
        <FormItem
          name="FUNCINFO_GRIDHIDELINES"
          class="FUNCINFO_GRIDHIDELINES"
          :label="$t('develop.tableBorders')"
        >
          <CheckboxGroup
            v-model:value="formState.FUNCINFO_GRIDHIDELINES"
            :options="isShowLineOptions"
            class="my-checkbox"
          />
        </FormItem>

        <!-- <FormItem name="FUNCINFO_SIMPLEBAR" class="FUNCINFO_SIMPLEBAR">
          <template #label>
            &nbsp;{{ $t('develop.simpleButton') }}
          </template>
          <Select
            v-model="formState.FUNCINFO_SIMPLEBAR"
            :allow-clear="false"
            :default-value="formState.FUNCINFO_SIMPLEBAR"
            :options="lineState"
            class="myInput"
            @change="($event) => handleChange('FUNCINFO_SIMPLEBAR', $event)"
          >
          </Select>
        </FormItem> -->
      </div>
      <hr />
      <div class="form-parame">
        <FormItem
          name="FUNCINFO_FORMCOLS"
          class="FUNCINFO_FORMCOLS"
          :label="$t('develop.formColumns')"
        >
          <Select
            v-model="formState.FUNCINFO_FORMCOLS"
            :allow-clear="false"
            :default-value="formState.FUNCINFO_FORMCOLS"
            :options="formColumn"
            class="myInput"
            @change="($event) => handleChange('FUNCINFO_FORMCOLS', $event)"
          />
        </FormItem>
        <FormItem
          name="FUNCINFO_FORMLABELWIDTH"
          class="FUNCINFO_FORMLABELWIDTH"
          :label="$t('develop.formFieldWeight')"
        >
          <InputNumber
            v-model:value="formState.FUNCINFO_FORMLABELWIDTH"
            min="0"
            class="myInputNumber"
            ><template #addonAfter>px</template>
          </InputNumber>
        </FormItem>
        <FormItem
          name="FUNCINFO_FORMWIDTH"
          class="FUNCINFO_FORMWIDTH"
          :label="$t('develop.formWeight')"
        >
          <InputNumber v-model:value="formState.FUNCINFO_FORMWIDTH" min="0" class="myInputNumber"
            ><template #addonAfter>px</template>
          </InputNumber>
        </FormItem>
        <FormItem
          name="FUNCINFO_FORMMINWIDTH"
          class="FUNCINFO_FORMMINWIDTH"
          :label="$t('develop.formMinWeight')"
        >
          <InputNumber v-model:value="formState.FUNCINFO_FORMMINWIDTH" min="0" class="myInputNumber"
            ><template #addonAfter>px</template>
          </InputNumber>
        </FormItem>
        <FormItem
          name="FUNCINFO_FORMFIELD_SPACING"
          class="FUNCINFO_FORMFIELD_SPACING"
          :label="$t('develop.fieldSpacing')"
        >
          <radio-group
            v-model:value="formState.FUNCINFO_FORMFIELD_SPACING"
            :options="formSpaceOptions"
            class="my-checkbox"
          />
        </FormItem>
        <!-- <FormItem name="FUNCINFO_FORM_POSITION" class="FUNCINFO_FORM_POSITION">
          <template #label>
            &nbsp;{{ $t('develop.formPosition') }}
          </template>
          <radio-group
            v-model:value="formState.FUNCINFO_FORM_POSITION"
            :options="formPositionOptions"
            class="my-checkbox"
          />
        </FormItem> -->

        <!-- <FormItem name="FUNCINFO_FIELD_SPACING" class="FUNCINFO_FIELD_SPACING">
          <template #label>
            &nbsp;{{ $t('develop.spaceBetween') }}
          </template>
          <radio-group
            v-model:value="formState.FUNCINFO_FIELD_SPACING"
            :options="formSpaceOptions"
            class="my-checkbox"
          />
        </FormItem> -->
        <FormItem
          name="RESOURCEFIELD_BGCOLOR"
          class="RESOURCEFIELD_BGCOLOR"
          :label="$t('develop.backgroundColor')"
        >
          <Color v-model:value="formState.RESOURCEFIELD_BGCOLOR" class="myInput"> </Color>
        </FormItem>
        <FormItem
          name="RESOURCEFIELD_BORDER_COLOR"
          class="RESOURCEFIELD_BORDER_COLOR"
          :label="$t('develop.borderColor')"
        >
          <Color v-model:value="formState.RESOURCEFIELD_BORDER_COLOR" class="myInput"> </Color>
        </FormItem>
        <FormItem
          class="RESOURCEFIELD_TITLEB_COLOR"
          :label="$t('develop.titleColor')"
          name="RESOURCEFIELD_TITLEB_COLOR"
        >
          <Color v-model:value="formState.RESOURCEFIELD_TITLEB_COLOR" class="myInput"> </Color>
        </FormItem>
        <FormItem
          class="RESOURCEFIELD_TITLEB_BGCOLOR"
          :label="$t('develop.titleBorderColor')"
          name="RESOURCEFIELD_TITLEB_BGCOLOR"
        >
          <Color v-model:value="formState.RESOURCEFIELD_TITLEB_BGCOLOR" class="myInput"> </Color>
        </FormItem>
        <!-- <FormItem name="FUNCINFO_TABLESTYLE" class="FUNCINFO_TABLESTYLE">
          <template #label>
            &nbsp;{{ $t('develop.greyLiterature') }}
          </template>
          <Select
            v-model="formState.FUNCINFO_TABLESTYLE"
            :allow-clear="false"
            :default-value="formState.FUNCINFO_TABLESTYLE"
            :options="useSkin"
            class="myInput"
            @change="($event) => handleChange('FUNCINFO_TABLESTYLE', $event)"
          >
          </Select>
        </FormItem> -->
      </div>
    </Form>
  </div>
</template>

<script>
  import { Form, Checkbox, Radio, Select, InputNumber, Color, Modal } from '@jecloud/ui';
  import { onMounted, onUnmounted, reactive } from 'vue';
  import {} from '@/helper/method';
  import { useOpenDialog } from '@/hooks';
  import VueEvent from '@/helper/model/event';
  import { saveConfigData } from '@/api';
  import { onScroll, scrollToTop } from '@/utils/utils';
  import { useI18n } from '@common/locales';

  export default {
    name: 'DevelopOnline',
    components: {
      Form,
      FormItem: Form.Item,
      RadioGroup: Radio.Group,
      CheckboxGroup: Checkbox.Group,
      // Input,
      Select,
      InputNumber,
      Color,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      // 表单数据
      let formState = reactive({
        FUNCINFO_CHILDSHOWTYPE: 'formOuterHorizontal',
        FUNCINFO_COLUMN_WIDTH: 'small',
        FUNCINFO_PAGESIZE: '30',
        FUNCINFO_PAGEINFOALIGN: 'left',
        FUNCINFO_DISABLEQUERYSQL: 'group',
        FUNCINFO_GRIDHIDELINES: 'right, bottom',
        FUNCINFO_SIMPLEBAR: '0',
        FUNCINFO_FORMCOLS: '2',
        FUNCINFO_FORMLABELWIDTH: '120',
        FUNCINFO_FORMWIDTH: '1280',
        FUNCINFO_FORMMINWIDTH: '1024',
        FUNCINFO_FORM_POSITION: '0',
        FUNCINFO_FIELD_SPACING: '0',
        FUNCINFO_FORMFIELD_SPACING: '1',
        RESOURCEFIELD_BGCOLOR: '#ffffff',
        RESOURCEFIELD_BORDER_COLOR: '#ffffff',
        RESOURCEFIELD_TITLEB_BGCOLOR: '',
        RESOURCEFIELD_TITLEB_COLOR: '#3f3f3f',
        FUNCINFO_TABLESTYLE: '0',
      });
      // 对比项
      let meta = {};
      let res = {};
      // 拿到并转换数据用于回显
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return item.key === 'DevelopOnline';
        });
        res[0]?.items.find((item) => {
          formState[item.code] = item['value'];
        });
        // 对比项赋值
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);

      const dataCallback = (data) => {
        changeDataType(data);
      };
      // 是否改变用于跳转等
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };
      // 保存回调
      const isSaveCallback = () => {
        if (isChange()) return changeBar();
        useOpenDialog({
          attribute: 'develop-online',
          allFields: JSON.stringify(formState),
        });
      };

      // 赋值
      const handleChange = (code, e) => {
        formState[code] = e;
      };
      const I18n = useI18n().messages.zh_CN;
      // 多选单选下拉框的数据
      const listPositionOptions = reactive([
        { label: I18n.develop.left, value: 'left' },
        { label: I18n.develop.right, value: 'right' },
        { label: I18n.develop.hidden, value: 'hidden' },
      ]);
      const formPositionOptions = reactive([
        { label: I18n.develop.middle, value: '0' },
        { label: I18n.develop.slide, value: '1' },
      ]);
      const formSpaceOptions = reactive([
        { label: I18n.develop.defaultCompact, value: '0' },
        { label: I18n.develop.standard, value: '1' },
      ]);
      const listElementOptions = reactive([
        { label: I18n.develop.advanced, value: 'group' },
        { label: I18n.develop.strategy, value: 'strategy' },
        // { label: I18n.develop.column, value: 'column' },
        { label: I18n.develop.keyword, value: 'keyword' },
      ]);
      const isShowLineOptions = reactive([
        { label: I18n.develop.vertical, value: 'right' },
        { label: I18n.develop.striping, value: 'bottom' },
      ]);
      const positionList = [
        { value: 'formOuterHorizontal', label: I18n.develop.outHorizontal },
        { value: 'formInnerHorizontal', label: I18n.develop.inHorizontal },
        { value: 'formInnerVertical', label: I18n.develop.inPortrait },
        // { value: 'formInnerTree', label: I18n.develop.inTree },
        // { value: 'gridInnerHorizontal', label: I18n.develop.formInHorizontal },
        // { value: 'gridOuterHorizontal', label: I18n.develop.formOutAbreast },
      ];
      const lineHeightList = [
        { value: 'large', label: I18n.develop.loose },
        { value: 'middle', label: I18n.develop.comfort },
        { value: 'small', label: I18n.develop.compact },
        { value: 'mini', label: I18n.develop.mini },
      ];
      const showCount = [
        { value: '10', label: '10' },
        { value: '20', label: '20' },
        { value: '30', label: '30' },
        { value: '40', label: '40' },
        { value: '50', label: '50' },
        { value: '60', label: '60' },
        { value: '70', label: '70' },
        { value: '80', label: '80' },
        { value: '90', label: '90' },
        { value: '100', label: '100' },
      ];
      const lineState = [
        { value: '1', label: I18n.yes },
        {
          value: '0',
          label: I18n.no,
        },
      ];
      const formColumn = [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
        { value: '4', label: '4' },
        { value: '6', label: '6' },
      ];
      const useSkin = [
        { value: '1', label: I18n.yes },
        {
          value: '0',
          label: I18n.no,
        },
      ];

      const data = reactive({
        value: '#ffffff',
        value1: '#ffffff',
        value2: '#3f3f3f',
      });

      // 回滚到顶部
      onMounted(() => {
        scrollToTop();
      });

      // 点击保存的回调
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: 'develop-online',
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            Modal.notice('保存成功', 'success'),
            // 通知修改"PlatformDevelop"页面的的数据
            VueEvent.emit('changeAllData', { item: 'develop-online', formState }),
          );
        } else {
          Modal.notice('无数据操作!', 'info');
        }
      };
      // 切换导航栏
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };
      // 点击保存
      VueEvent.on('toolbarSaveEvent', clickCallback);
      // 回显数据
      VueEvent.on('sendData', dataCallback);
      // 是否保存
      VueEvent.on('isSave', isSaveCallback);
      // 滚动及动画
      VueEvent.on('fadeScroll', onScroll);
      onUnmounted(() => {
        VueEvent.off('toolbarSaveEvent', clickCallback);
        VueEvent.off('sendData', dataCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('fadeScroll', onScroll);
      });

      return {
        formState,
        positionList,
        lineHeightList,
        showCount,
        lineState,
        useSkin,
        listPositionOptions,
        listElementOptions,
        isShowLineOptions,
        formPositionOptions,
        formSpaceOptions,
        data,
        handleChange,
        formColumn,
      };
    },
  };
</script>

<style lang="less" scoped>
  .develop-online {
    font-size: 14px;
    .display-mode {
      padding: 30px 0 10px 0;
    }
    .list-parame {
      padding: 20px 0 10px 0;
    }
    .form-parame {
      padding-top: 20px;
      padding-bottom: 80px;
    }
  }
</style>
